import { style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const splitterStyle = style({
	display: 'none',
	alignSelf: 'stretch',
	userSelect: 'none',
	background: 'transparent',
	transition: 'background-color 0.2s',
	selectors: {
		'&.hover': {
			backgroundColor: vars.color.accent,
		},
		'&[type=horizontal]': {
			display: 'block',
			width: '6px',
			cursor: 'ew-resize',
		},
		'&[type=vertical]': {
			display: 'block',
			height: '6px',
			cursor: 'ns-resize',
		},
		'&[disabled]': {
			cursor: 'default',
		},
	},
});
